<template>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :xl="6" :lg="7">
      <div class="under-block" id="backend">
        <div id="img">
          <el-image :src="require('@/assets/image/reactor.jpg')" class="image"></el-image>
        </div>
      </div>
    </el-col>
    <el-col :span="1">
      <i class="el-icon-arrow-right" style="font-size: 80px; color: rgb(220, 230, 240)"></i>
    </el-col>
    <div v-if="show_login" id="login">
      <el-col :xl="6" :lg="7" id="login">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px" label-position="center">
          <el-form-item label="" prop="username" style="width: 380px">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="" prop="password" style="width: 380px">
            <div @keyup.enter="Login">
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
                        prefix-icon="el-icon-s-goods" clearable></el-input>
            </div>
          </el-form-item>
          <el-form-item style="width: 380px">
            <el-button type="primary" @click="Login" style="width: 45%">登录</el-button>
            <el-button type="danger" style="width: 45%" @click="show_login=false">学生注册</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>
    <div v-if="!show_login" id="register">
      <el-col :xl="6" :lg="7">
        <el-form :model="registerForm" :rules="rules" ref="loginForm" label-width="80px" label-position="center">
          <el-form-item label="" prop="username" style="width: 380px">
            <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入真实姓名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="" prop="password" style="width: 380px">
            <div>
              <el-input v-model="registerForm.password" type="password" placeholder="请输入您的密码"
                        prefix-icon="el-icon-s-goods" clearable></el-input>
            </div>
          </el-form-item>
          <el-form-item label="" prop="confirm_password" style="width: 380px">
            <div>
              <el-input v-model="registerForm.confirm_password" type="password" placeholder="请再次确认密码"
                        prefix-icon="el-icon-s-goods" clearable></el-input>
            </div>
          </el-form-item>
          <el-form-item label="" prop="class_id" style="width: 380px">
            <div>
              <template>
                <el-select v-model="registerForm.student_class" placeholder="请选择班级" style="width: 300px">
                  <el-option
                      v-for="item in class_option"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </div>
          </el-form-item>
          <el-form-item style="width: 380px">
            <el-button type="primary" @click="register" style="width: 45%">注册</el-button>
            <el-button type="danger" style="width: 45%" @click="show_login=true">前往登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>
  </el-row>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      registerForm: {
        username: '',
        password: '',
        confirm_password: '',
        student_class: '',
      },
      show_login: true,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        confirm_password: [
          {required: true, message: '请确认密码', trigger: 'blur'}
        ],
      },
      class_option: [],
    };
  },
  created() {
    this.get_class_list()
    this.rotateFun()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    rotateFun() {
      let angel = 0
      let val = 0
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        let backend = document.getElementById('backend');
        let img = document.getElementById('img');
        angel += 2;
        val -= 3
        backend.style.transform = 'rotate(' + angel + 'deg)';
        img.style.transform = 'rotate(' + val + 'deg)';
      }, 50);
    },
    register() {
      let username = this.registerForm.username
      let password = this.registerForm.password
      let confirm_password = this.registerForm.confirm_password
      if (password !== confirm_password) {
        this.$message({
          type: 'error',
          message: '两次密码不一致,请重新输入',
          duration: 3000,
        })
        return false
      }
      let student_class = this.registerForm.student_class
      if (!username || !password || !student_class || !confirm_password) {
        this.$message({
          type: 'error',
          message: '请将注册信息填写完整',
          duration: 2000,
        })
      } else {
        this.$axios({
          method: 'post',
          url: this.$settings.BASE_URL + '/user/userinfo/student_register/',
          data: this.registerForm,
        }).then(res => {
          if (res.data.code === 20000) {
            this.$message({
              type: 'success',
              message: '注册成功,请等待老师激活账号即可登录',
              duration: 4000,
            })
            this.registerForm = {}
          } else {
            this.$message({
              type: 'error',
              message: '用户名已存在,请重新注册',
              duration: 4000,
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '服务器异常',
            duration: 3000,
          })
        })
      }
    },
    get_class_list() {
      this.$axios({
        method: 'get',
        url: this.$settings.BASE_URL + '/user/student_class/',
      }).then(res => {
        this.class_option = res.data.result.results
      })
    },
    Login() {
      if (!this.loginForm.password || !this.loginForm.username) {
        this.$message({
          type: 'error',
          message: '用户名或密码不能为空',
          duration: 3000,
        })
      } else {
        this.$http.post(this.$settings.BASE_URL + '/user/userinfo/login/', this.loginForm).then(res => {
          if (res.data.code === 20000) {
            this.$store.commit('SET_TOKEN', res.data)
            if (res.data.role === 1 || res.data.role === 2) {
              this.$router.push("/TeacherIndex")
            } else if (res.data.role === 0) {
              this.$router.push("/StudentIndex")
            }
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg,
              duration: 3000,
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '服务器异常',
            duration: 3000,
          })
        })
      }
    },
  }
}
</script>

<style scoped>
.image {
  width: 316px;
  height: 316px;
  border-radius: 50%;
  position: relative;
  left: 2px;
  bottom: 1px;
  /*right: 2px;*/
  top: 3px;
}

.under-block {
  background-color: black;
  height: 320px;
  width: 320px;
  border-radius: 50%;
  border-top: solid rgb(233, 233, 216) 8px;
  border-right: solid rgb(128, 128, 126) 8px;
  border-bottom: solid rgb(220, 230, 240) 8px;
  border-left: solid rgb(150, 150, 150) 8px;
  position: relative;
  left: 60px;
}

.el-row {
  color: aliceblue;
  /*background-color: rgba(50, 65, 86, 1.0);*/
  background-color: rgba(28, 40, 51, 1);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.el-divider {
  height: 250px;
}

#register {
  position: relative;
  top: 20px;
}
</style>
